<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <style>
        .bg-f2 {
            background-color: #f8f9fa;
        }

        video {
            width: 320px;
            height: auto;
        }

        .videoRow {
            margin-top: 30px;
        }

        #previewLabel {
            display: block;
            position: absolute;
        }
    </style>
    <title class="mixAudio">混音</title>
</head>

<body class="bg-f2">
    <div class="container">

        <div class="my-3 p-3 bg-white rounded box-shadow small">

            <h6 class="border-bottom border-gray pb-2 mb-0 mixAudio">Express 混音</h6>

            <div>room:<span id="roomState"></span> publish:<span id="streamState"></span></div>

            <div class="row" style="margin-top:1%">

                <div class="col-sm">
                    <div class="input-group input-group-sm mb-3">
                        <div class="input-group-prepend">
                            <label class="input-group-text" for="audioList"><strong
                                    class="text-gray-dark audioDevices">音频设备</strong></label>
                        </div>
                        <select class="custom-select" id="audioList" style="width: 50%">
                        </select>
                    </div>
                </div>
                <div class="col-sm">
                    <div class="input-group input-group-sm mb-3">
                        <div class="input-group-prepend">
                            <label class="input-group-text" for="videoList"><strong
                                    class="text-gray-dark videoDevices">视频设备</strong></label>
                        </div>
                        <select class="custom-select" id="videoList" style="width: 50%">
                        </select>
                    </div>
                </div>


                <div class="col-sm">
                    <div class="input-group input-group-sm mb-3">
                        <div class="input-group-prepend">
                            <label class="input-group-text" for="roomId"><strong
                                    class="text-gray-dark roomid">房间号</strong></label>
                        </div>
                        <input type="email" class="form-control d-inline" id="roomId" value="6565" style="width: 75%"
                            aria-describedby="emailHelp" placeholder="please enter room ID">
                    </div>
                </div>

                <div class="col-sm">
                    <div class="input-group input-group-sm mb-3">
                        <div class="input-group-prepend">
                            <label class="input-group-text" for="voicePreset"><strong
                                    class="text-gray-dark">变声类型</strong></label>
                        </div>
                        <select class="custom-select" id="voicePreset" style="width: 50%">
                            <option value="">空</option>
                            <option value="0">不变声</option>
                            <option value="1">男声变童声</option>
                            <option value="2">男声变女声</option>
                            <option value="3">女声变童声</option>
                            <option value="4">女声变男声</option>
                            <option value="5">外国人音效</option>
                            <option value="6">汽车人擎天柱声效</option>
                            <option value="7">机器人声效</option>
                            <option value="8">空灵声效</option>
                            <option value="9">磁性男声效</option>
                            <option value="10">清新女声效</option>
                            <option value="11">C大调电音音效</option>
                            <option value="12">A小调电音音效</option>
                            <option value="13">和声小调电音音效</option>
                            <option value="14">女活力音效</option>
                            <option value="15">浑厚音效</option>
                            <option value="16">低沉音效</option>
                            <option value="17">圆润音效</option>
                            <option value="18">假音音效</option>
                            <option value="19">饱满音效</option>
                            <option value="20">清澈音效</option>
                            <option value="21">高亢音效</option>
                            <option value="22">嘹亮音效</option>
                        </select>
                    </div>
                </div>

            </div>

            <div class="row">
                <div class="col-sm">
                    <button type="button" id="createRoom" class="btn btn-primary btn-sm enterRoomPush">创建房间</button>
                    <button type="button" id="openRoom" class="btn btn-primary btn-sm enterRoomPlay">进入房间</button>
                    <button type="button" id="startPreview" class="btn btn-primary btn-sm ">预览</button>
                    <button type="button" id="startPublish" class="btn btn-primary btn-sm ">推流</button>
                    <button type="button" id="stopPublish" class="btn btn-primary btn-sm ">停止推流</button>
                    <button type="button" id="leaveMixRoom" class="btn btn-secondary btn-sm leaveRoom">退出</button>
                    <button type="button" id="MixAudio" class="btn btn-primary btn-sm mixAudio">混音</button>
                    <button type="button" id="stopMixAudio" class="btn btn-primary btn-sm stopMixAudio">停止混音</button>
                    <button type="button" id="toggleSpeaker"
                        class="btn btn-primary btn-sm enableMicrophone">开关音频</button>
                    <button type="button" id="switchAiDenoise" class="btn btn-primary btn-sm">开启AI降噪</button>
                    <button type="button" id="changeVoice" class="btn btn-primary btn-sm">变声</button>

                </div>
            </div>
            <br>

     
            <div class="col-sm">
                <ol>
                    <li>
                        <audio id="extenerVideo1" src="https://zego-public.oss-cn-shanghai.aliyuncs.com/webplatform/websdk/bike.mp3" playsinline controls loop crossOrigin="anonymous"></audio>
                        音量 <input type="range" id="volume1" min="0" max="100" value="100">
                        <input type="file" class="" accept="audio/*|video/*" id="inputExtenerVideo1"/>替换音频文件1</button>
                    </li>
                    <li>
                        <audio id="extenerVideo2" src="https://zego-public.oss-cn-shanghai.aliyuncs.com/webplatform/websdk/oldman.mp4" playsinline controls loop crossOrigin="anonymous"></audio>
                        音量 <input type="range" id="volume2" min="0" max="100" value="100">
                    </li>
                </ol>
            </div>
            <div class="row">
                音效id: <input type="text" id="effectId" value="1">

                <button type="button" id="preloadEffect" class="btn btn-primary btn-sm">预加载音效资源</button>
                <button type="button" id="playEffect" class="btn btn-primary btn-sm" disabled>播放音效</button>
                <button type="button" id="pauseEffect" class="btn btn-primary btn-sm" disabled>暂停音效</button>
                <button type="button" id="resumeEffect" class="btn btn-primary btn-sm" disabled>恢复音效</button>
                <button type="button" id="stopEffect" class="btn btn-primary btn-sm" disabled>停止音效</button>
                <button type="button" id="unloadEffect" class="btn btn-primary btn-sm" disabled>释放音效</button>
                <button type="button" id="mixingBuffer" class="btn btn-primary btn-sm">mixingBuffer实时混音</button>
                <button type="button" id="stopMixingBuffer"
                    class="btn btn-primary btn-sm">stopMixingBuffer停止实时混音</button>
                <input type="range" id="progress" min="0" max="100" value="0">
                <button type="button" id="seekTo" class="btn btn-primary btn-sm ">设置进度</button>
                音效文件： <input type="text" id="musicPath"
                    value="https://zego-public.oss-cn-shanghai.aliyuncs.com/webplatform/websdk/bike.mp3">
                <button type="button" id="playEffectWithPath" class="btn btn-primary btn-sm">加载并播放音效</button>

            </div>

            <details style="background-color: #fbdffc;">
                <summary>3A</summary>
                <div class="row">
                    <div class="col-sm">
                        <div class="input-group input-group-sm mb-3">
                            <div class="input-group-prepend">
                                <label class="input-group-text" for="noiseSuppression"><strong
                                        class="text-gray-dark">减噪</strong></label>
                            </div>
                            <select class="custom-select" id="noiseSuppression" style="width: 50%">
                                <option value="1">开</option>
                                <option value="0">关</option>
                            </select>
                        </div>
                    </div>

                    <div class="col-sm">
                        <div class="input-group input-group-sm mb-3">
                            <div class="input-group-prepend">
                                <label class="input-group-text" for="autoGainControl"><strong
                                        class="text-gray-dark">自动增益</strong></label>
                            </div>
                            <select class="custom-select" id="autoGainControl" style="width: 50%">
                                <option value="1">开</option>
                                <option value="0">关</option>
                            </select>
                        </div>
                    </div>

                    <div class="col-sm">
                        <div class="input-group input-group-sm mb-3">
                            <div class="input-group-prepend">
                                <label class="input-group-text" for="echoCancellation"><strong
                                        class="text-gray-dark">回声消除</strong></label>
                            </div>
                            <select class="custom-select" id="echoCancellation" style="width: 50%">
                                <option value="1">开</option>
                                <option value="0">关</option>
                            </select>
                        </div>
                    </div>
                </div>
            </details>

            <details style="background-color: #fbdfac;">
                <summary>本地录制</summary>
                <div>
                    <button type='button' id='startRecord' class='btn btn-primary btn-sm'
                        title='startRecord'>开始录制</button>
                    <button type='button' id='stopRecord' class='btn btn-primary btn-sm'
                        title='stopRecord'>结束录制</button>
                    <button type='button' id='pauseRecord' class='btn btn-primary btn-sm'
                        title='pauseRecord'>暂停录制</button>
                    <button type='button' id='resumeRecord' class='btn btn-primary btn-sm'
                        title='resumeRecord'>恢复录制</button>
                    <button type='button' id='saveRecord' class='btn btn-primary btn-sm'
                        title='saveRecord'>保存录制</button>
                    <div>state: <span id="reocrdState"></span></div>
                </div>
            </details>

            <details style="background-color: #defbac;">
                <summary>增删轨道</summary>
                <div>
                    <button type="button" id="addVideoTrack" class="btn btn-primary btn-sm">增加视频轨道</button>
                    <button type="button" id="removeVideoTrack" class="btn btn-primary btn-sm">删除视频轨道</button>
    
                    <button type="button" id="addAudioTrack" class="btn btn-primary btn-sm">增加音频轨道</button>
                    <button type="button" id="removeAudioTrack" class="btn btn-primary btn-sm">删除音频轨道</button>
                </div>
            </details>
            <div class="row videoRow">
                <div class="col-sm">
                    <label id="previewLabel" class="text-white"></label>
                    <video id="previewVideo" autoplay muted playsinline></video>
                    <div class="view-wrapper" style="width: 240px;border: 1px solid #dfdfdf; font-size: 12px;">
                        <div id="local-view" style="min-width: 240px;max-width: 240px; height: 240px;"></div>
                        <div id="local-action">
                          <button id="local-ctrl-audio">开关声音</button>
                          <button id="local-ctrl-video">开关视频</button>
                          <button id="local-ctrl-resume">恢复</button>
                          <button id="local-ctrl-play">挂载</button>
                          <button id="local-ctrl-stop">卸载</button>
                          <button id="local-ctrl-speaker">设扬声器</button>
                          <input id="local-ctrl-volume" type="range" min="0" max="100" value="100" id="audioVolume1">
                          <span id="local-ctrl-audio-state"></span>
                          <span id="local-ctrl-video-state"></span>
                        </div>
                    </div>
                </div>
                <div class="col-sm remoteVideo">
                </div>
            </div>

        </div>

    </div>


</body>

</html>